.slider_four_in_line { width: 1134px; position: relative; margin: 0 auto; user-select: none;margin-top:20px; }
.slider_four_in_line > * { transition: ease all 1s; overflow: hidden; }
.slider_four_in_line .hidden { opacity: 0; z-index: 0; top: 0px; left: 50%; }
.slider_four_in_line .active, .slider_four_in_line .next1, .slider_four_in_line .next2, .slider_four_in_line .next3, .slider_four_in_line .next4, .slider_four_in_line .prev1 { position: absolute; width: 24%; height: 100%; top: 0px; left: 25%; z-index: 10; margin: 0 0.5%; }
.slider_four_in_line .next1 { left: 50%; }
.slider_four_in_line .next2 { left: 75%; }
.slider_four_in_line .next3 { width: 0%; left: 100%; z-index: 0; opacity: 0; }
.slider_four_in_line .next4 { left: 100%; width: 0%; z-index: 0; opacity: 0; }
.slider_four_in_line .prev1 { position: absolute; width: 24%; height: 100%; top: 0px; left: 0%; z-index: 10; opacity: 1; }
.slider_four_in_line .prev2, .slider_four_in_line .prev3, .slider_four_in_line .prev4 { position: absolute; width: 0%; height: 100%; top: 0px; left: 0%; z-index: 0; opacity: 0; }
/*********************************/

.slider_clock { width: 600px; height: 600px; position: relative; margin: 0 auto; user-select: none; }
.slider_clock > * { transition: ease all 1s; }
.slider_clock .active { position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -125px; width: 400px; height: 250px; transform: rotate(0deg); opacity: 1; z-index: 10; overflow: hidden; }
.slider_clock .next1, .slider_clock .next2, .slider_clock .next3, .slider_clock .next4, .slider_clock .next5, .slider_clock .next6, .slider_clock .next7, .slider_clock .prev1, .slider_clock .prev2, .slider_clock .prev3, .slider_clock .prev4, .slider_clock .prev5, .slider_clock .prev6, .slider_clock .prev7, .slider_clock .hidden { position: absolute; left: 50%; top: 50%; width: 96px; height: 60px; margin-top: 200px; margin-left: -48px; transform-origin: 48px -200px; transform: rotate(0deg); opacity: 1; overflow: hidden; }
.slider_clock .next2 { transform: rotate(-30deg); }
.slider_clock .next3 { transform: rotate(-60deg); }
.slider_clock .next4 { transform: rotate(-90deg); }
.slider_clock .next5 { transform: rotate(-120deg); }
.slider_clock .next6 { transform: rotate(-150deg); }
.slider_clock .next7 { opacity: 0; transform: rotate(-180deg); }
.slider_clock .prev1 { transform: rotate(30deg); }
.slider_clock .prev2 { transform: rotate(60deg); }
.slider_clock .prev3 { transform: rotate(90deg); }
.slider_clock .prev4 { transform: rotate(120deg); }
.slider_clock .prev5 { transform: rotate(150deg); }
.slider_clock .prev6 { transform: rotate(180deg); }
.slider_clock .prev7 { opacity: 0; transform: rotate(210deg); }
.slider_clock .hidden { opacity: 0; transform: rotate(180deg); }
/*********************************/

.nav_indicators { position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; z-index: 50000; }
.nav_indicators ul { position: static; display: inline-block; margin: 0 auto; padding: 0; }
.nav_indicators ul li { position: static; display: inline-block; width: 20px; height: 20px; margin: 10px; padding: 0; overflow: hidden; background: #fff; color: #fff; border: 2px solid #000; border-radius: 50%; cursor: pointer; }
.nav_indicators ul li.active { position: static; display: inline-block; width: 20px; height: 20px; margin: 10px; padding: 0; background: #555; color: #555; border: 2px solid #aaa; border-radius: 50%; cursor: pointer; }
.next_button, .prev_button { position: absolute; left: 100% !important; top: 50% !important; margin: -15px 0 0 -25px !important; width: 50px !important; height: 50px !important; border: 1px solid #000 !important; background: #fff !important; opacity: 0.5 !important; z-index: 5000 !important; cursor: pointer; text-align: center; line-height: 30px; border-radius: 50%; }
.prev_button { position: absolute; left: 0% !important; }
.next_button:hover, .prev_button:hover { opacity: 1 !important; }
.next_button:after, .prev_button:after { content: ""; position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin-top: -10px; }
.next_button:after { border-left: 15px solid #000; border-right: 15px solid transparent; border-bottom: 10px solid transparent; border-top: 10px solid transparent; margin-left: -5px; }
.prev_button:after { border-right: 15px solid #000; border-left: 15px solid transparent; border-bottom: 10px solid transparent; border-top: 10px solid transparent; margin-left: -25px; }
div.slider > div:not(.nav_indicators):not(.next_button):not(.prev_button) {  background: #fff; text-align: center; box-sizing: border-box; font-size: 150px;height:220px; }